<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <template #header>
      <el-form label-width="80px" :inline="true">
        <el-form-item label="医院名称:">
          <el-input
            placeholder="请输入"
            v-model="searchHospital.hosname"></el-input>
        </el-form-item>
        <el-form-item label="医院编号:">
          <el-input
            placeholder="请输入"
            v-model="searchHospital.hoscode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="ele-Search" @click="searchHos"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </template>
    <el-table :data="hosList" border stripe>
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column label="医院LOGO" prop="logoData">
        <template v-slot="{ row }">
          <img
            :src="`data:image/png;base64,${row.logoData}`"
            width="100"
            height="100" />
        </template>
      </el-table-column>
      <el-table-column label="医院名称" prop="hosname"> </el-table-column>
      <el-table-column label="等级" prop="param.hostypeString">
      </el-table-column>
      <el-table-column label="详细地址" prop="param.fullAddress">
      </el-table-column>
      <el-table-column label="状态" prop="status">
        <template v-slot="{ row }">
          <span>{{ row.status === 0 ? '未上线' : '已上线' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"> </el-table-column>
      <el-table-column label="操作" width="210">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="router.push(`/hospital/hosDetail?id=${row.id}`)"
            >查看</el-button
          >
          <el-button type="danger" size="small">排班</el-button>
          <el-button type="danger" size="small" @click="onLine(row)"
            >上线</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :style="{ marginTop: '20px' }"
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      layout="->,total, prev, pager, next, sizes ,jumper"
      :page-sizes="[20, 40, 80, 100]"
      :total="totalNum"
      background
      :pager-count="7">
    </el-pagination>
  </el-card>
</template>

<script lang="ts">
import type { HosContentListType } from '@/api/hospital/type'
import { reqChangeStatus, reqGetHosList, type StatusType } from '@/api/hospital'
import { defineComponent, onMounted, ref, watch } from 'vue'

export default defineComponent({
  name: 'HospitalSet',
})
</script>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
// 初始化数据
const currentPage = ref(1)
const pageSize = ref(10)
const totalNum = ref(0)
const hosList = ref<HosContentListType>([])
const searchHospital = ref({
  hosname: '',
  hoscode: '',
})

// 封装请求函数
const getHospitalList = async (page: number = currentPage.value) => {
  const limit = pageSize.value
  const result = await reqGetHosList({ page, limit, ...searchHospital.value })
  // console.log(result)
  totalNum.value = result.totalElements
  hosList.value = result.content
}

// 初始化发请求
onMounted(() => {
  getHospitalList()
})

//页码和每页条数改变重新发请求
watch([pageSize, currentPage], () => {
  getHospitalList()
  //翻页之后回到顶部
  window.scrollTo(0, 0)
})

// 搜索
const searchHos = () => {
  getHospitalList(1)
}

// 上线
const onLine = async (row: StatusType) => {
  const id = row.id
  const status = 1 - row.status
  await reqChangeStatus({ id, status })
  getHospitalList()
}
</script>

<style scoped></style>
